Ext.define("StatsWindow", {
 
        extend : 'Ext.window.Window',
        modal : true,
        width : 600,
        height : 400,
        twitterHandle:'',
        twitterDate:'',
        layout : 'fit',
        initComponent : function() {

                var chart = Ext.create('Ext.chart.Chart', {
                        style : 'background:#fff',
                        theme : 'Category1',
						legend: {				
							position: 'right'
						},
                        store : Ext.create('Ext.data.Store', {
                            autoLoad: true,
                            storeId: 'storeVolume',
                            fields : ['Day', 'TweetsNoURL', 'TweetsWithURL', 'ReTweetsNoURL', 'ReTweetsWithURL', 'Mean', 'StdDev1Below', 'StdDev1Above'],
                            model: 'ModelName',
                            proxy: {
                                type: 'ajax',
                                url: 'http://ec2-54-221-173-96.compute-1.amazonaws.com:5000/twitter/api/alpha/get_statistics',
                                        params: {
                                                handle: this.twitterHandle,
                                                date: this.twitterDate,
                                                method: this.twitterMethod 
                                        },
                                reader: {
                                  type: 'json',
                                  root: 'records',
                                  successProperty: 'success'
                                }
                            }
                        }),
                        axes : [ {
                                type : 'Numeric',
                                position : 'left',
                                fields : ['Day', 'TweetsNoURL', 'TweetsWithURL', 'ReTweetsNoURL', 'ReTweetsWithURL', 'Mean', 'StdDev1Below', 'StdDev1Above'],
                                title : 'Tweet Volume',
                                grid : true
                        }, {
                                type : 'Category',
                                position : 'bottom',
                                fields : [ 'Day' ],
                                title : 'Day of the Week'
                        } ],
                        series : [ {
                                type : 'column',
                                axis : 'left',
                                xField : 'Day',
                                yField : ['TweetsNoURL', 'TweetsWithURL', 'ReTweetsNoURL', 'ReTweetsWithURL'],
								stacked: true,
								tips: {
									trackMouse: true,
									width: 165,
									height: 28,
									renderer: function(storeItem, item) {
										this.setTitle(String(item.value[1]) + " " + item.yField);
									}
								}
                        }, {
                                type : 'scatter',
                                axis : 'left',
                                xField : 'Day',
                                yField : 'Mean',
                                markerConfig : {
                                        type : 'circle',
                                        size : 5
                                }
                        }, {
                                type : 'line',
                                axis : 'left',
                                smooth : true,
                                xField : 'Day',
                                yField : 'StdDev1Above',
                                markerConfig : {
                                        type : 'cross',
                                        size : 5
                                }
                        }, {
                                type : 'line',
                                axis : 'left',
                                smooth : true,
                                xField : 'Day',
                                yField : 'StdDev1Below',
                                markerConfig : {
                                        type : 'cross',
                                        size : 5
                                }
                        } ]
                });
 
                var panel = Ext.create('widget.panel', {
 
                        title: this.twitterHandle,
                        border : 1,
                        style : {
                                boderColor : '#000000',
                                borderStyle : 'solid',
                                borderWidth : '1px'
                        },
                        items: [chart]
                });

                this.items = [panel];
                this.callParent();
        }
});
 
